<template>
  <div>
    <el-menu
      router
      :default-active="$route.path"
      :collapse="collapse"
      class="el-menu-vertical-demo"
      unique-opened
      background-color="#001529"
      text-color="#ffffff"
      active-text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item class="no-child" index="/home">
        <i class="el-icon-pie-chart" />
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu v-if="auth.order" index="10">
        <template slot="title">
          <i class="el-icon-shopping-bag-2" />
          <span>产品管理</span>
        </template>
        <el-menu-item v-if="auth.product" index="/product">产品列表</el-menu-item>
      </el-submenu>
      <el-submenu v-if="auth.jurisdiction" index="3">
        <template slot="title">
          <i class="el-icon-setting" />
          <span>权限管理</span>
        </template>
        <el-menu-item v-if="auth.people" index="/people">用户管理</el-menu-item>
        <el-menu-item v-if="auth.role" index="/role">角色管理</el-menu-item>
        <el-menu-item v-if="auth.menuControl" index="/menuControl">菜单管理</el-menu-item>
      </el-submenu>
      <el-submenu v-if="auth.user" index="5">
        <template slot="title">
          <i class="el-icon-setting" />
          <span>用户设置</span>
        </template>
        <el-menu-item v-if="auth.userinfo" index="/me">个人中心</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-warning-outline" />
          <span>错误页</span>
        </template>
        <el-menu-item index="/401">401</el-menu-item>
        <el-menu-item index="/403">403</el-menu-item>
        <el-menu-item index="/404">404</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'Collaspsed',
  props: {
    collapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      auth: {
        order: false,
        jurisdiction: false,
        product: false,
        people: false,
        role: false,
        menuControl: false,
        user: false,
        userinfo: false
      }
    }
  },
  computed: {},
  created() {},
  updated() {
    this.getAuth()
  },
  mounted() {
    this.getAuth()
  },
  methods: {
    getAuth() {
      this.$api.post('/data/authData', { role: this.$store.state.setting.role }, r => {
        console.log('打印权限路由返回结果----', r)
        if (r.flag) {
          this.$store.commit('auth/changeAuthData', r.data)
          this.auth.order = this.checkAuth(this.$store.state.auth.auth.order.value, 1)
          this.auth.product = this.checkAuth(this.$store.state.auth.auth.order.product.value, 2)
          this.auth.jurisdiction = this.checkAuth(this.$store.state.auth.auth.jurisdiction.value, 1)
          this.auth.people = this.checkAuth(this.$store.state.auth.auth.jurisdiction.people.value, 2)
          this.auth.role = this.checkAuth(this.$store.state.auth.auth.jurisdiction.role.value, 2)
          this.auth.menuControl = this.checkAuth(this.$store.state.auth.auth.jurisdiction.menuControl.value, 2)
          this.auth.user = this.checkAuth(this.$store.state.auth.auth.user.value, 1)
          this.auth.userinfo = this.checkAuth(this.$store.state.auth.auth.user.userinfo.value, 2)
        }
      })
    },
    checkAuth(code, lv) {
      if (lv === 1) {
        return this.$store.state.auth.authData.lv1.indexOf(code) > -1
      }
      if (lv === 2) {
        return this.$store.state.auth.authData.lv2.indexOf(code) > -1
      }
      if (lv === 3) {
        return this.$store.state.auth.authData.lv3.indexOf(code) > -1
      }
    },
    handleOpen(key, keyPath) {
      console.log('handleOpen----', key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log('handleClose----', key, keyPath)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
